<template>
  <div class="table-list-container">
    <TableList
      :columns="columns"
      :pagination="paginationMixin"
      :data-source="dataSource"
      :row-key="keyTabs"
      :loading="loading"
      @href-click="handleRouterClick"
      @change="handleTableChange"
    />
  </div>
</template>

<script>
import TableList from './tableList.vue';
import ColumnsMixin from './mixin';
import mixinTable from '@/mixins/mixin-table.js';
import { postMyApplicationList } from '@/api/workbBench.js';

export default {
  components: {
    TableList,
  },
  mixins: [ColumnsMixin, mixinTable],
  props: {
    keyTabs: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dataSource: [],
      loading: false,
    };
  },
  computed: {},
  watch: {
    keyTabs: {
      handler(newVal) {
        newVal === '2' && this.getMyApplicationList();
      },
      immediate: true,
    },
  },

  methods: {
    // 我的申请
    async getMyApplicationList() {
      const params = {
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
      };
      try {
        this.loading = true;
        const res = await postMyApplicationList(params);
        this.dataSource = res?.data?.data?.records || [];
        this.paginationMixin.total = res.data.data?.total;
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.paginationMixin = page;
      this.getMyApplicationList();
    },
  },
};
</script>

<style lang="less" scoped>
.table-list-container {
  // margin-top: 20px;
  padding: 0 20px;
  /deep/.poros-table-middle > .poros-table-content > .poros-table-scroll > .poros-table-body > table > .poros-table-tbody > tr > td {
    padding: 0 7px;
  }
}
/deep/ .poros-table-thead > tr > th {
  background-color: #d1ebf7;
}
</style>
